<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>同门科技产品筛选</title>
	<link rel="stylesheet" href="./public/css/product.css">
	<link rel="stylesheet" href="./public/css/common.css">
	<link rel="stylesheet" href="./public/css/aos.css">
</head>

<body>
	<div id="header"></div>
	<div id="right"></div>
	<div id="container">
		<div class="banner">
			<img class="image" src="https://img.tongmen.cdn.dgyunju.cn/images/topImages/product.png" alt="">

		</div>
		<!-- 遮罩层 -->
		<div class="overlay" id="overlay"></div>

		<!-- 主容器 -->
		<div class="main-container">
			<!-- 侧边栏 -->
			<aside class="aside-bar-container">
				<h2 class="aside-bar-header">同门科技产品分类</h2>

				<div class="el-input search-input">
					<input type="text" class="el-input__inner" placeholder="搜索" id="asideSearchInput">
					<span class="el-input__suffix">
						<span class="el-input__suffix-inner">
							<i class="icon fi fi-search" id="asideSearchBtn"></i>
						</span>
					</span>
				</div>

				<ul class="item" id="categoryList1">
					<p class="title" data-id="1">产品分类1</p>
					<li class="list" data-id="101">子分类1-1</li>
					<li class="list" data-id="102">子分类1-2</li>
					<li class="list" data-id="103">子分类1-3</li>
				</ul>

				<ul class="item" id="categoryList2">
					<p class="title" data-id="2">产品分类2</p>
					<li class="list" data-id="201">子分类2-1</li>
					<li class="list" data-id="202">子分类2-2</li>
				</ul>
			</aside>

			<!-- 主要内容区域 -->
			<div class="content-area">
				<!-- 移动端筛选栏 -->
				<div class="filter-bar-container">
					<div class="list" id="showCategoryDrawer">产品分类</div>
					<div class="list" id="showTypeDrawer">条件筛选</div>

					<div class="el-input search-input">
						<input type="text" class="el-input__inner" placeholder="搜索" id="mobileSearchInput">
						<span class="el-input__suffix">
							<span class="el-input__suffix-inner">
								<i class="fi fi-search" id="mobileSearchBtn"></i>
							</span>
						</span>
					</div>
				</div>

				<!-- 产品分类抽屉 -->
				<div class="el-drawer category-drawer" id="categoryDrawer">
					<div class="el-drawer__header">
						<h1 class="drawer-title">产品分类</h1>
					</div>

					<ul class="item">
						<p class="title" data-id="1">产品分类1</p>
						<li class="column" data-id="101">子分类1-1</li>
						<li class="column" data-id="102">子分类1-2</li>
						<li class="column" data-id="103">子分类1-3</li>
					</ul>

					<ul class="item">
						<p class="title" data-id="2">产品分类2</p>
						<li class="column" data-id="201">子分类2-1</li>
						<li class="column" data-id="202">子分类2-2</li>
					</ul>
				</div>

				<!-- 条件筛选抽屉 -->
				<div class="el-drawer type-drawer" id="typeDrawer">
					<div class="el-drawer__header">
						<h1 class="drawer-title">条件筛选</h1>
					</div>

					<div class="item">
						<p class="title">筛选条件1</p>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="1">
								<span class="checkbox-label">选项1-1</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="2">
								<span class="checkbox-label">选项1-2</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="3">
								<span class="checkbox-label">选项1-3</span>
							</label>
						</div>
					</div>

					<div class="item">
						<p class="title">筛选条件2</p>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="4">
								<span class="checkbox-label">选项2-1</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="5">
								<span class="checkbox-label">选项2-2</span>
							</label>
						</div>
					</div>
					<div class="item">
						<p class="title">筛选条件3</p>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="4">
								<span class="checkbox-label">选项2-1</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="5">
								<span class="checkbox-label">选项2-2</span>
							</label>
						</div>
					</div>
					<div class="item">
						<p class="title">筛选条件2</p>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="4">
								<span class="checkbox-label">选项2-1</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="5">
								<span class="checkbox-label">选项2-2</span>
							</label>
						</div>
					</div>

					<div class="button-group">
						<button type="button" class="button button-primary" id="resetFilterBtn">重置</button>
						<button type="button" class="button button-blue" id="completeFilterBtn">完成</button>
					</div>
				</div>

				<!-- 桌面端类型筛选 -->
				<div class="type-filter-container">
					<div class="item">
						<div class="label">电源类型</div>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="1">
								<span class="checkbox-label">交流电源</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="2">
								<span class="checkbox-label">直流电源</span>
							</label>
						</div>
					</div>

					<div class="item">
						<div class="label">功率范围</div>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="5">
								<span class="checkbox-label">0-300W</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="6">
								<span class="checkbox-label">300-900W</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">1000-1500W</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">1500-3000W</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">4000-6000W</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">7000-10000W</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">10KW以上</span>
							</label>
						</div>
					</div>
					<div class="item">
						<div class="label">电压范围</div>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="5">
								<span class="checkbox-label">0-15V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="6">
								<span class="checkbox-label">0-30V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-60V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-120V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-150V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-300V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-600V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-1000V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-1600V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">0-2000V</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">2000V以上</span>
							</label>
						</div>
					</div>
					<div class="item">
						<div class="label">通讯接口</div>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="5">
								<span class="checkbox-label">LAN</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="6">
								<span class="checkbox-label">USB</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">RS232</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">RS485</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">CAN</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">Digital I/O port</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="7">
								<span class="checkbox-label">Extornal analog</span>
							</label>
						</div>
					</div>
					<div class="item">
						<div class="label">通道</div>
						<div class="checkbox-group">
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="5">
								<span class="checkbox-label">单通道</span>
							</label>
							<label class="checkbox-item">
								<input type="checkbox" class="checkbox-input" value="6">
								<span class="checkbox-label">双通道</span>
							</label>
						</div>
					</div>
					<div class="item">
						<div class="label">特殊应用</div>

					</div>

					<div class="button-group">
						<button type="button" class="button button-primary" id="desktopSearchBtn">确定</button>
						<button type="button" class="button button-danger" id="desktopResetBtn">重置</button>
					</div>
				</div>

				<!-- 产品列表内容 -->
				<!-- 产品列表 -->
				<div data-aos="fade-left" class="product-list">
					<div class="products-grid" id="productsGrid">
						<!-- 产品将通过JS动态生成 -->
						<a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a>
						<a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a><a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a><a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a><a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a><a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a><a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a><a href='/product_id.html' class="product-card">
							<img class="product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1739608866.jpg" alt="产品1"
								loading="lazy">
							<div class="product-info">
								<h3 class="product-title">产品1</h3>
								<p class="product-category">11111</p>
							</div>
						</a>
					</div>

					<!-- 分页 -->
					<div id="pagination" class="l-page"></div>

					<!-- 空状态 -->
					<div class="empty-state" id="emptyState" style="display: none;">
						没有相关的产品列表
					</div>

					<!-- 加载状态 -->
					<div class="loading-overlay" id="loadingOverlay" style="display: none;">
						加载中...
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="footer"></div>


	<!-- jQuery和自定义脚本 -->
	<script src="./public/js/jquery.min.js"></script>
	<script src="./public/js/common.js"></script>
	<script src="./public/js/aos.js"></script>
	<script src="./public/js/product.js"></script>
	<script src="./public/js/pagination.min.js"></script>
</body>

</html>